<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .static{
            width:150px;
            height:150px;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: firebrick;
        }
        .b{
            border:20px solid blueviolet;
            
        }
        .c{
            border-radius: 50%;
        }
        .mains{

        }
        .navs{
            width:440px;
            display: flex;
            justify-content: space-between;
        }
        .nav{
            width:100px;
            height:38px;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            background: pink;
            color:#fff;
            cursor: pointer;
        }
        .nav.active{
            background: deeppink;
            color:aquamarine;
        }
        .content{

        }
        .citem{
            width:440px;
            height:440px;
            border-radius: 20px;
            color:#f50;
            font-size: 60px;
            background: darkorchid;
            text-align: center;
            line-height: 440px;
            margin-top:20px;
        }

        .tada{
            animation: tada .8s;
        }
        .sd-enter-active{
            animation: zoomInDown 0.9s;
        }
        .sd-leave-active{
            animation: zoomOutDown 0.9s;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div v-if="false">
            <div class="static a b c">1</div>
            <div class="static a b" v-bind:class="className">2 </div>
            <div class="static " :class="clist">3 </div>
            <div class="static" :class="{a:flagA,b:flagB}">4</div>
            <div class="static" :class="obj">5</div>
            <div class="static" :class="[isa,isb,'c']">6</div>

            <div class="static" style="background: #f50;">7</div>
            <div class="static" :style="{background: '#f50',color:'blue',borderRadius:'50px'}">8</div>
            <div class="static" :style="styleobj">9</div>
        </div>

        <div class="mains">
            <div class="navs">
                <div class="nav" 
                    v-for="(l,i) in list" 
                    :key="i" 
                    @click="changeCurrent(i)"
                    :class="current==i?'active tada':'' "
                    >
                    {{l.title}}
                </div>
            </div>

            <div class="content">
                <transition-group name="sd" mode="out-in">
                    <div class="citem" v-for="(l,i) in list" :key="i" v-show="current==i">
                        {{l.title}}-{{l.value}}
                    </div>
                </transition-group>
                
            </div>
        </div>

        <!-- <div class="mains">
            <div class="navs">
                <div class="nav" @click="changeCurrent(0)" :class="current==0?'active':'' ">情感小说</div>
                <div class="nav" @click="changeCurrent(1)" :class="current==1?'active':'' ">悬疑小说</div>
                <div class="nav" @click="changeCurrent(2)" :class="current==2?'active':'' ">玄幻小说</div>
                <div class="nav" @click="changeCurrent(3)" :class="current==3?'active':'' ">修仙小说</div>
            </div>

            <div class="content">
                <div class="citem" :style="{display:current==0?'block':'none'}">情感小说-100</div>
                <div class="citem" :style="{display:current==1?'block':'none'}">悬疑小说-50</div>
                <div class="citem" :style="{display:current==2?'block':'none'}">玄幻小说-30</div>
                <div class="citem" :style="{display:current==3?'block':'none'}">修仙小说-10</div>
            </div>
        </div> -->
    </div>

    <script>
        const vm = new Vue({
            data:{
                list:[
                    {
                        title:"情感小说",
                        value:100
                    },
                    {
                        title:"悬疑小说",
                        value:50
                    },
                    {
                        title:"玄幻小说",
                        value:30
                    },
                    {
                        title:"修仙小说",
                        value:10
                    }
                ],
                title:"class & style 绑定",
                className:'c',
                clist:'a c ',
                flagA:false,
                flagB:true,
                obj:{
                    a:true,
                    b:false,
                    c:true 
                },
                isa:'a',
                isb:'b',
                styleobj:{
                    fontSize:50,
                    color:"#fff",
                    borderRadius:"50%",
                    backgroundColor:"pink"
                },
                current:0
            },
            methods:{
                changeCurrent(index){
                    this.current = index;
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>

    <!-- 动态的class 和  style 切换   
    v-bind 用于 class 和 style 时，Vue.js 做了专门的增强   除了字符串之外，还可以是对象或数组

    v-bind
    v-bind:class 
    :class = " "  {}  []
    v-bind:style 
    :style = {}  [{}]

    :style="{display:current==i?'block':'none'} -->
</body>
</html>